<template>
  <div class="header">
    <div class="box">
      <div class="left">欢迎来到叩丁狼积分商城</div>
      <div class="right">
        <img
          :src="
            vuex_loginState
              ? require('@/assets/img/service.848ec511.png')
              : require('@/assets/img/userImg.f8bbec5e.png')
          "
          alt=""
        />
        <div class="nav-list">
          <div>用户名：{{ vuex_userInfo.nickName || "- -" }}</div>
          <div>我的鸡腿：{{ vuex_userInfo.coin || "- -" }}</div>
          <div>获取鸡腿</div>
          <div>叩丁狼官网</div>
        </div>
        <div class="login" @click="loginOrShopCar">
          {{ vuex_loginState ? `购物车` : "登录" }}
          {{ vuex_loginState ? vuex_cartTotal : "" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as vuex from "vuex";

export default {
  computed: {
    ...vuex.mapState({
      vuex_loginState: (state) => state.login.loginState,
      vuex_userInfo: (state) => state.user.userInfo || {},
      vuex_cartTotal: (state) => state.user.cartTotal,
    }),
  },
  methods: {
    loginOrShopCar() {
      const store = this.$store;
      if (this.vuex_loginState) {
        // 已登录 则是购物城
      } else {
        // 未登录 则是登录
        store.commit("login/showLoginModal", true);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 40px;
  background: #242b39;
  line-height: 40px;
  color: #fff;
}
.box {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 26px;
    border-radius: 13px;
    margin-right: 6px;
  }
}
.right > div,
.right > img {
  cursor: pointer;
}
.nav-list {
  width: 450px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 20px;
  div {
    width: 100px;
  }
}
.login {
  width: 124px;
  height: 40px;
  background: #0a328e;
}
</style>